<template>
	<view>
		<view class="">
			<image style="width: 100%;" src="/static/img/httpindex/login/login_bg.png" mode="widthFix"></image>
		</view>
		<view class="login_main">
			<view class="login_logo">
				LOGO
			</view>
			<view class="input_phone">
				<image style="width: 26rpx;margin-right: 66rpx;" src="/static/img/httpindex/login/shoujihao.png"
					mode="widthFix"></image>
				<input maxlength="11" type="number" placeholder="请输入手机号" v-model="username"
					placeholder-style="font-size:24rpx;color:#CCCCCC ">
			</view>
			<view class="input_phone" style="margin-top: 10rpx;">
				<image style="width: 30rpx;margin-right: 66rpx;" src="/static/img/httpindex/login/yanzhengma.png"
					mode="widthFix"></image>
				<input type="text" placeholder="请输入验证码" v-model="code"
					placeholder-style="font-size:24rpx;color:#CCCCCC ">
				<view class="setcode" @tap="Code">{{btnstr}}</view>
				<!-- <view class="setcode" style="opacity: 0.5;">
							获取验证码
						</view> -->
			</view>
			<view class="input_phone" style="margin-top: 10rpx;">
				<image style="width: 26rpx;margin-right: 66rpx;" src="/static/img/httpindex/login/mima54.png"
					mode="widthFix"></image>
				<input type="password" placeholder="请输入新的登陆密码" v-model="password"
					placeholder-style="font-size:24rpx;color:#CCCCCC ">
			</view>
			<view class="input_phone" style="margin-top: 10rpx;">
				<image style="width: 26rpx;margin-right: 66rpx;" src="/static/img/httpindex/login/mima54.png"
					mode="widthFix"></image>
				<input type="password" placeholder="请确认新的登陆密码" v-model="repassword"
					placeholder-style="font-size:24rpx;color:#CCCCCC ">
			</view>

			<view class="btn_login" @tap="confirm">
				提交
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				btnstr: '获取验证码',
				numShow: false,
				second: 60,
				password: '',
				repassword: '',
				username: '',
				code: '',
				showPassword: true,
				eve: "/static/img/login/biyan.png",
				eve_avtion: "/static/img/login/zhengyan.png",
				backgroundColor: '$uni-bg-color-grey',
			}
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),

		},


		methods: {
			...mapMutations(['login', 'logout']),
			changePassword() {
				this.showPassword = !this.showPassword
			},

			async Code() {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.username))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				let res = await this.$myRequest({
					url: '/getCode',
					data: {
						mobile: this.username
					}
				})

				this.$api.msg(res.data.msg);

				this.btnstr = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.btnstr = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.btnstr = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},
			async confirm() {
				if (this.password != this.repassword) {
					this.$api.msg('两次密码不一致')
					return
				}

				let reg = await this.$myRequest({
					url: '/resetPwd1',
					methods: 'POST',
					data: {
						mobile: this.username,
						code: this.code,
						password: this.password,
					},
				})

				this.$api.msg(reg.data.msg);
				uni.setStorageSync('token', '')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)
			},
		}
	}
</script>
<style>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.login_main {
		height: 740rpx;
		background: #fff;
		border-radius: 10rpx;
		position: relative;
		margin: 0 30rpx;
		top: -160rpx;
		padding: 0 47rpx;
	}

	.login_logo {
		border: 1px solid #1CBCB8;
		border-radius: 50%;
		color: #14AFAB;
		font-size: 40rpx;
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		position: relative;
		top: -45rpx;
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
	}

	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;
		font-size: 30rpx;
	}

	.btn_login {
		margin-top: 72rpx;
		background: #1B1B1B;
		border-radius: 70px;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		padding: 24rpx 0;
	}

	.bottom_cls {
		font-size: 20rpx;
		color: #14B6B2;
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between
	}

	.setcode {
		color: #FF0000;
		font-size: 24rpx;
		white-space: nowrap;
	}
</style>